<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Insight</title>
    <link type="text/css" rel="stylesheet" href="../src/css/theme-ist.css?__ist__=1_0_10" />
</head>

<body>
    <div id="info">INFO HERE</div>
    <div id="chart" style="border:solid 1px #777;position:absolute;top:200px;left:200px"></div>
    
    <input type="button" value="show" onclick="show();"/>
    <input type="button" value="hide" onclick="hide();"/>
    <input type="button" value="moveMask" onclick="moveMask();"/>
    <input type="button" value="moveContainer" onclick="moveContainer();"/>
    <div id="mask" style="background-color:green;position:absolute;top:200px;left:550px;width:500px;height:500px"></div>

    <div style="font-size:14px font-family:Arial,Helvetica">addf但纷纷sae飞洒\n阿斯蒂芬</div>
    
    <script type="text/javascript">var _TMP_WEB_ROOT_ = '..'; </script>
    <script type="text/javascript" src="../asset/xutil.js"></script>
    <script type="text/javascript" src="../asset/xjschart.js" ></script>
    
    <script>
        
        function g (el) {
            return document.getElementById(el);
        }
        function info(info) {
            g('info').innerHTML += '<br>' + info;
        }
        var R = Raphael;
        var paper = R('chart', 1600, 1400);

        // var paper2 = R('chart2', 400, 400);

        // hide();
        
        //---------------------------------------------
        //---------------------------------------------

        function show() {
            // g('chart').style.display = '';
            g('chart').style.visibility = 'visible';
        }
        function hide() {
            // g('chart').style.display = 'none';
            g('chart').style.visibility = 'hidden';
        }
        function moveMask() {
            g('mask').style.left = '1400px';
        }   
        function moveContainer() {
            g('chart').style.left = '100px';
        }

        function setHover(el, over, out) {
            // el.hover(over, out);
            el.mouseover(over);
            el.mouseout(out);
        }
        
        // circle        
        var rect = paper.rect(40, 100, 200, 300);
        rect.attr('fill', '#00f');
        rect.attr('fill-opacity', '0.1');
        setHover(
            rect,
            function() {
                console.log((new Date()).getTime() + ' rect hover in ');
            },
            function() {
                console.log((new Date()).getTime() + ' rect hover out ');
            }
        );
        

        var circleTest1 = paper.circle(0, 0, 17);
        var circleTest2 = paper.circle(0, 0, 17);
        // circle2.attr('fill', '#020');
        // circle2.attr('stroke', '#020');
        // circle2.attr('stroke-width', '0');
        console.log('bbox ' + circleTest1.getBBox());
        circleTest1.transform(['T', 0, 0]);
        console.log('bbox ' + circleTest1.getBBox());
        circleTest1.transform(['T', 100, 200]);
        console.log('bbox ' + circleTest1.getBBox());
        console.log('bbox ' + circleTest2.getBBox());


        var rectSmall = paper.rect(0,0,50, 50);
        rectSmall.attr('fill', '#f00');
        rectSmall.attr('stroke', '#eee');
        rectSmall.attr('x', -47);
        rectSmall.transform(['T', 90, 190]);

        var set = paper.set();
        set.push(rectSmall);
        set.push(circle2);

        rectSmall.click(function () {
            alert('131121212');
        });
        setHover(
            rectSmall,
            function() {
                console.log((new Date()).getTime() + ' circle hover in ');
            },
            function() {
                console.log((new Date()).getTime() + ' circle hover out');
            }
        );
            
        circle2.click(function () {
            alert('asdf');
        });
        
        var path1 = paper.path('M10,30T50,30M10,60T70,60').attr({stroke:'#543'});
        var ani = R.animation({path: 'M90,30T130,30M90,60T150,60'}, 5000);
        path1.animate(ani);
        // circle2.animateWith(path1, ani, {transform:'T400,200'}, 2000);

        var txt = paper.text(10,0, '中文问问温暖我').attr({fill: '#653', 'alignment-baseline': 'top'});
        // alert(txt.getBBox());

        // var star = paper.path('M16,22.375L7.116,28.83l3.396-10.438l-8.883-6.458l10.979,0.002L16.002,1.5l3.391,10.434h10.981l-8.886,6.457l3.396,10.439L16,22.375L16,22.375z')
        //     .attr({x: 0, y: 0, fill: "#000", stroke: "#173", 'stroke-width': 1});

        var starP = Raphael.transformPath('M16,22.375L7.116,28.83l3.396-10.438l-8.883-6.458l10.979,0.002L16.002,1.5l3.391,10.434h10.981l-8.886,6.457l3.396,10.439L16,22.375L16,22.375z', 's0.6,0.6,0,0');
        
        var star = paper.path(starP)
            .attr({x: 0, y: 0, fill: "#456", stroke: "#173", 'stroke-width': 1});

        //circle2.animate({transform:'T400,200'}, 5000);
        
        //var p = paper.path('M10,0T10,20M0,10T10,10').attr({stroke:'#555'}).attr({x:200, y:300});
        //var pp = R.transformPath(['M',10,0,'T',10,20], ['T',100,100]);
        //p.attr({path: pp});
        
        
        //info(set.transform(['t', 80, 150]));
        
        // set.push(circle2, circle);
        // set.transform("t20,40");
        
        //var text = paper.text(130,40,'addf但纷纷</tspan>sae飞洒\n阿斯蒂芬').attr({font:'28px "Hoefler Text", Georgia, serif, Arial, Helvetica', "font-weight":'bold', bold:700, fill:"#000"});
        //info(text.width);
        
    </script>
</body>

</html>